<template>
  <Popup v-model="state.visible" :="fv.rootProps">
    <view :class="[variables.ns.e('prompt')]">
      <slot>{{ state.props.prompt }}</slot>
    </view>
  </Popup>
</template>

<script lang="ts" setup>
import { ConfirmPopupNS, variables } from '.'
import Popup from '@/components/popup/index.vue'
import { computed, reactive } from 'vue'
import { t } from '@/locale'
import { PopupNS } from '@/components'

defineOptions({
  name: ConfirmPopupNS.name
})
const props = defineProps(ConfirmPopupNS.props)
const state = reactive({
  visible: false,
  props: { ...props }
})
const fv = computed(() => {
  const rootProps: PopupNS.Props = {
    ...state.props.popupProps,
    class: [variables.ns.b],
    position: 'center',
    showClose: false,
    btns: [],
    title: state.props.title
  }
  if (state.props.cancelBtn?.show) rootProps.btns?.push(state.props.cancelBtn as any)
  if (state.props.confirmBtn?.show) rootProps.btns?.push(state.props.confirmBtn as any)
  return {
    rootProps
  }
})

function openPopup(p?: ConfirmPopupNS.Props){
  Object.assign(state.props, props, p)
  state.props.cancelBtn ??= {}
  state.props.cancelBtn.text ??= t('other.cancel')
  state.props.cancelBtn.show ??= true
  state.props.cancelBtn.props ??= {}
  state.props.cancelBtn.props.type ??= 'warning'
  state.props.confirmBtn ??= {}
  state.props.confirmBtn.text ??= t('other.confirm')
  state.props.confirmBtn.show ??= true
  state.visible = true
}

function closePopup(){
  state.visible = false
}

defineExpose({
  openPopup,
  closePopup
})
</script>